<template>
    <div class="customer-table-container">

        <!-- 操作工具栏 -->
        <div class="table-actions">
            <div class="left-actions">
                <el-button
                    v-for="action in actions"
                    :key="action.name"
                    :type="action.type"
                    size="small"
                    @click="emitAction(action.name)"
                >
                    {{ action.label }}
                </el-button>
            </div>

        </div>

        <!-- 数据表格 -->
        <el-scrollbar
    class="custom-scrollbar"
    always
    view-class="scrollbar-view"
  >
        <el-table
            :data="tableData"
            stripe
            style="width: 100%"
            @selection-change="handleSelectionChange"
        >


                <el-table-column type="selection" width="55" fixed="left"/>
                <el-table-column align="center"
                                 v-for="column in columns"
                                 :key="column.prop"
                                 :prop="column.prop"
                                 :fixed="column.fixed"
                                 :label="column.label"
                                 :width="column.width"
                >

                    <template #default="{ row }">
                        <!-- 单据编号列 -->
                        <el-link
                            v-if="column.prop === 'code'"
                            type="primary"
                            @click="emit('code-click', row)"
                        >
                            {{ row[column.prop] }}
                        </el-link>
            <span v-if="column.prop === 'status'">
              <el-tag :type="getStatusType(row.status)" @click="handleStatusClick(row)" style="cursor: pointer;">
               {{ getStatusText(row.status) }}
              </el-tag>
            </span>
<!--                        <span v-else>{{ row[column.prop] }}</span>-->
                    </template>
                </el-table-column>

                <!-- 固定操作列 -->
                <el-table-column label="操作" width="180" fixed="right" align="center">
                    <template #default="{ row }">
                        <div class="operation-container">
                            <!-- 修改链接 -->
                            <el-link
                                type="primary"
                                :underline="false"
                                :disabled="[1, 3].includes(row.status)"
                                @click="$emit('edit', row)"
                                class="operation-link"
                            >
                                修改
                            </el-link>

                            <!-- 更多操作下拉菜单 -->
                            <el-dropdown
                                trigger="hover"
                                placement="bottom-end"
                                @command="handleCommand($event, row)"
                            >
                                <el-link
                                    type="primary"
                                    :underline="false"
                                    class="operation-link"
                                >
                                    更多
                                </el-link>

                                <template #dropdown>
                                    <el-dropdown-menu class="operation-menu">
                                        <!-- 审核/反审核 -->
                                        <el-dropdown-item
                                            v-if="row.status === 0 || 1"
                                            command="audit"
                                            @click="handleAudit(row)"
                                            :icon="Finished"
                                        >
                                            审核
                                        </el-dropdown-item>
                                        <el-dropdown-item
                                            v-if="[2,3].includes(row.status)"
                                            command="reverseAudit"
                                            :icon="Refresh"
                                        >
                                            反审核
                                        </el-dropdown-item>

                                        <!-- 打印 -->
                                        <el-dropdown-item
                                            command="print"
                                            :icon="Printer"
                                            divided
                                        >
                                            打印
                                        </el-dropdown-item>

                                        <!-- 作废 -->
                                        <el-dropdown-item
                                            command="invalidate"
                                            :icon="Delete"
                                            divided
                                            @click="handleDelete(row)"
                                            class="danger-item"
                                        >
                                            作废
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-scrollbar>

        <!-- 分页组件 -->
        <div class="pagination-wrapper">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :page-size="pageSize"
                :current-page="currentPage"
                @current-change="handlePageChange"
            />
        </div>
    </div>
    <el-dialog
        v-model="auditDialogVisible"
        title="审核详情"
        width="600px"
        :close-on-click-modal="false"
    >
        <div v-if="currentAudit.statusCode === 0" class="audit-pending">
            <el-alert type="info" :closable="false">
                当前单据未审核，请等待审核
            </el-alert>
        </div>


        <div v-else-if="currentAudit.statusCode === 1" class="audit-processing">
            <el-descriptions :column="1" border>
                <el-descriptions-item label="审核人">
                    {{ currentAudit.auditor || '系统自动分配' }}
                </el-descriptions-item>
                <el-descriptions-item label="当前状态">
                    <el-tag type="info">审核中</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="发起时间">
                    {{ currentAudit.time || '-' }}
                </el-descriptions-item>
                <el-descriptions-item label="审核意见">
                    {{ currentAudit.comment }}
                </el-descriptions-item>
            </el-descriptions>
        </div>


        <div v-else class="audit-details">
            <el-descriptions :column="1" border>
                <el-descriptions-item label="审核人">
                    {{ currentAudit.auditor || '-' }}
                </el-descriptions-item>
                <el-descriptions-item label="审核结果">
                    <el-tag :type="currentAudit.result ? 'success' : 'danger'">
                        {{ currentAudit.result ? '通过' : '拒绝' }}
                    </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="审核时间">
                    {{ currentAudit.time || '-' }}
                </el-descriptions-item>
                <el-descriptions-item label="审核意见">
                    {{ currentAudit.comment || '无' }}
                </el-descriptions-item>
            </el-descriptions>
        </div>

        <template #footer>
            <el-button @click="auditDialogVisible = false">关 闭</el-button>
        </template>
    </el-dialog>


</template>

<script setup lang="ts">
import {Delete, Printer, Refresh, Finished} from '@element-plus/icons-vue'

import {ref, computed, reactive} from 'vue'

const auditDialogVisible = ref(false)
const currentAudit = reactive({
    statusCode: 0,
    auditor: '',
    result: true,
    time: '',
    comment: ''
})

const handleCommand = (command: string, row: any) => {
    switch (command) {
        case 'audit':
            emit('audit', row)
            break
        case 'reverseAudit':
            emit('reverse-audit', row)
            break
        case 'print':
            // window.print()
            emit("print", row)
            break
        case 'invalidate':
            emit('invalidate', row)
            break
    }
}

const handleStatusClick = (row: any) => {
    // 获取审核数据（示例数据）
    currentAudit.statusCode = row.status || 0
    currentAudit.auditor = row.checkmanIdStr
    currentAudit.result = [2, 3].includes(row.status) ? (row.status === 3) : false
    currentAudit.time = row.checkTime
    currentAudit.comment = row.checkComment

    auditDialogVisible.value = true
}
interface StatusItem {
  text: string;
  type: string;
  color: string;
}
const statusConfig :{ [key: number]: StatusItem } = reactive({
  0: { text: '未审核', type: 'warning', color: '#e6a23c' },
  1: { text: '审核中', type: 'warning', color: '#2478CA' },
  2: { text: '审核未通过', type: 'danger', color: '#f56c6c' },
  3: { text: '已审核', type: 'success', color: '#67c23a' },
  4: { text: '执行中' ,type: 'success' , color: '#cf1010'},
  11: { text: '已关闭' , type :'warning' , color:'#454545'}
})
let test = reactive([{"id" : 1 } , {"id " : 2 ,"status":0}])
// 获取状态标签类型
const getStatusType = (status: number) => {
    return statusConfig[status]?.type || 'info'
}

// 获取状态显示文本
const getStatusText = (status: number) => {
    return statusConfig[status]?.text || '未知状态'
}

const props = defineProps({
    // 表格列配置
    columns: {
        type: Array as () => Array<{
            prop: string
            label: string
            width?: number
        }>,
        default: () => [
            {prop: 'code', label: '客户编码', width: 150},
            {prop: 'name', label: '客户名称', width: 200},
            {prop: 'category', label: '客户分类'},
            {prop: 'status', label: '状态', width: 120},
            {prop: 'operate', label: '操作'}

        ]
    },
    // 表格数据（已分页）
    tableData: {
        type: Array as () => any[],
        required: true
    },
    // 总数据量
    total: {
        type: Number,
        required: true
    },

    // 当前页码
    currentPage: {
        type: Number,
        required: true
    },
    // 每页显示条数
    pageSize: {
        type: Number,
        default: 5
    }
})

const emit = defineEmits<{
    (e: 'page-change', page: number): void
    (e: 'action', actionName: string, selectedRows?: any[]): void
    (e: 'edit', row: any): void
    (e: 'delete', row: any): void
    (e: 'code-click', row: any): void;
    (e: 'print', row: any): void;
}>()

// 操作按钮配置
const actions = ref([
    {name: 'add', label: '新增', type: 'success'},
    {name: 'import', label: '导入', type: 'success'},
    {name: 'export', label: '导出', type: 'success'},
    {name: 'downLoadTemplate', label: '下载模板', type: 'success'},
])

// 打印事件
const handlePrint = (row: any) => {
    emit('print', row); // 触发打印事件
}

// 编辑事件
const handleEdit = (row: any) => {
    emit('edit', row); // 触发编辑事件
}

//删除事件
const handleDelete = (row: any) => {
    emit('delete', row); // 触发删除事件
}

// 分页变化处理
const handlePageChange = (newPage: number) => {
    emit('page-change', newPage)
}

// 操作按钮事件
const emitAction = (actionName: string) => {
    if (actionName === 'export') {
        emit('action', actionName, selectedRows.value); // 传递选中行
    } else {
        emit('action', actionName);
    }
}

// 触发行审核事件
const handleAudit = (row: any) => {
    emit('row-audit', row)
}

// 多选处理
const selectAll = ref(false)
const selectedRows = ref<any[]>([])

const handleSelectionChange = (selection: any[]) => {
    selectedRows.value = selection
}
</script>

<style scoped>
.customer-table-container {
    background: #fff;
    padding: 16px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.table-actions {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.left-actions {
    display: flex;
    gap: 8px;
}

.pagination-wrapper {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}

.el-tag {
    padding: 0 8px;
    height: 24px;
    line-height: 24px;
}
.audit-processing {
  :deep(.el-tag) {
    background-color: #e8f4ff;
    border-color: #2478CA;
  }
}
::v-deep .el-table__fixed-right::before,
::v-deep .el-table__fixed::before {
  background-color: transparent !important;
}

/* 多固定列层级调整 */
::v-deep .el-table__fixed {
  z-index: 2 !important; /* 使单据编号列覆盖选择列阴影 */
}

.operation-container {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.operation-link {
  padding: 0 4px;
  transition: color 0.3s;

  &:hover:not(.is-disabled) {
    color: var(--el-color-primary);
    background-color: var(--el-color-primary-light-9);
  }

  &.is-disabled {
    color: var(--el-disabled-text-color);
    cursor: not-allowed;
  }
}

/* 下拉菜单样式 */
.operation-menu {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  :deep(.el-dropdown-menu__item) {
    padding: 8px 20px;
    font-size: 13px;

    &:hover {
      background-color: var(--el-color-primary-light-9);
    }
  }

  .danger-item {
    color: var(--el-color-danger);

    &:hover {
      color: var(--el-color-danger);
      background-color: var(--el-color-danger-light-9);
    }
  }
}

</style>
